<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>我的订单</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
</head>
<body>
    <!-- 引入头部导航 -->
    <jsp:include page="common/header.jsp"></jsp:include>
    
    <div class="container">
        <div class="row mt-4">
            <div class="col-md-12">
                <!-- 成功消息提示 -->
                <c:if test="${not empty successMessage}">
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        <strong>成功!</strong> ${successMessage}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                </c:if>
                
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">我的订单</h5>
                    </div>
                    <div class="card-body">
                        <c:if test="${empty orders}">
                            <div class="text-center py-5">
                                <img src="${pageContext.request.contextPath}/static/images/empty-order.png" alt="空订单" class="img-fluid mb-3" style="max-width: 200px;">
                                <h4 class="text-muted">暂无订单记录</h4>
                                <a href="${pageContext.request.contextPath}/" class="btn btn-primary mt-3">去购物</a>
                            </div>
                        </c:if>
                        
                        <c:if test="${not empty orders}">
                            <div class="table-responsive">
                                <table class="table table-hover table-striped">
                                    <thead>
                                        <tr>
                                            <th>订单编号</th>
                                            <th>创建时间</th>
                                            <th>收货人</th>
                                            <th>订单金额</th>
                                            <th>订单状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <c:forEach items="${orders}" var="order">
                                            <tr>
                                                <td>${order.orderNo}</td>
                                                <td><fmt:formatDate value="${order.createTime}" pattern="yyyy-MM-dd HH:mm:ss" /></td>
                                                <td>${order.receiverName}</td>
                                                <td>￥${order.payment}</td>
                                                <td>
                                                    <span class="badge badge-${order.status == 10 ? 'warning' : order.status == 20 ? 'info' : order.status == 30 ? 'primary' : order.status == 40 ? 'success' : 'secondary'}">
                                                        ${order.statusDesc}
                                                    </span>
                                                </td>
                                                <td>
                                                    <a href="${pageContext.request.contextPath}/order/detail?orderNo=${order.orderNo}" class="btn btn-sm btn-outline-info">查看详情</a>
                                                    <c:if test="${order.status == 10}">
                                                        <button class="btn btn-sm btn-outline-primary pay-btn" data-order-no="${order.orderNo}">去支付</button>
                                                        <button class="btn btn-sm btn-outline-danger cancel-btn" data-order-no="${order.orderNo}">取消订单</button>
                                                    </c:if>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </tbody>
                                </table>
                            </div>
                            
                            <!-- 分页 -->
                            <div class="d-flex justify-content-center mt-4">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <c:if test="${pageInfo.current > 1}">
                                            <li class="page-item">
                                                <a class="page-link" href="${pageContext.request.contextPath}/order/list?pageNum=${pageInfo.current-1}" aria-label="Previous">
                                                    <span aria-hidden="true">&laquo;</span>
                                                </a>
                                            </li>
                                        </c:if>
                                        
                                        <c:forEach begin="1" end="${pageInfo.pages}" var="i">
                                            <li class="page-item ${pageInfo.current == i ? 'active' : ''}">
                                                <a class="page-link" href="${pageContext.request.contextPath}/order/list?pageNum=${i}">${i}</a>
                                            </li>
                                        </c:forEach>
                                        
                                        <c:if test="${pageInfo.current < pageInfo.pages}">
                                            <li class="page-item">
                                                <a class="page-link" href="${pageContext.request.contextPath}/order/list?pageNum=${pageInfo.current+1}" aria-label="Next">
                                                    <span aria-hidden="true">&raquo;</span>
                                                </a>
                                            </li>
                                        </c:if>
                                    </ul>
                                </nav>
                            </div>
                        </c:if>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 引入底部 -->
    <jsp:include page="common/footer.jsp"></jsp:include>
    
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
    
    <script>
        $(function() {
            // 支付订单
            $('.pay-btn').click(function() {
                var orderNo = $(this).data('order-no');
                
                $.ajax({
                    url: '${pageContext.request.contextPath}/order/pay',
                    type: 'POST',
                    data: {
                        orderNo: orderNo
                    },
                    success: function(res) {
                        if (res.status === 1) {
                            alert('支付成功');
                            location.reload();
                        } else {
                            alert(res.msg || '支付失败');
                        }
                    },
                    error: function() {
                        alert('服务器错误');
                    }
                });
            });
            
            // 取消订单
            $('.cancel-btn').click(function() {
                if (!confirm('确定要取消订单吗？')) {
                    return;
                }
                
                var orderNo = $(this).data('order-no');
                
                $.ajax({
                    url: '${pageContext.request.contextPath}/order/cancel',
                    type: 'POST',
                    data: {
                        orderNo: orderNo
                    },
                    success: function(res) {
                        if (res.status === 1) {
                            alert('取消订单成功');
                            location.reload();
                        } else {
                            alert(res.msg || '取消订单失败');
                        }
                    },
                    error: function() {
                        alert('服务器错误');
                    }
                });
            });
        });
    </script>
</body>
</html> 